import React, { Component } from 'react';
import { WeaLocaleProvider, WeaCheckbox, WeaInput } from 'ecCom';
import { Popover, Button } from 'antd';

const getLabel = WeaLocaleProvider.getLabel;

export default class EmailGroup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      isAddGroup: false,
      newgroupvalue: '',
    };
    this.groups = [];
    this.initShow = true;
  }

  setGroups = () => {
    const { groups, inGroup } = this.props;
    let inGroupIds = inGroup.map(v => v.groupId);
    let selectIds = this.groups
      .filter(v => v.isChecked === 1)
      .map(v => v.goutId);
    let condition_1 = item =>
      this.initShow && inGroupIds.some(v => v == item.goutId);
    let condition_2 = item =>
      !this.initShow && selectIds.some(v => v == item.goutId);
    let newGroup = groups.map((item) => {
      if (condition_1(item) || condition_2(item)) {
        return { ...item, isChecked: 1 };
      }
      return { ...item, isChecked: 0 };
    });
    return newGroup;
  };

  changeGroupSelect = (v, item) => {
    this.groups = this.groups.map((group) => {
      if (group.goutId === item.goutId) {
        return { ...item, isChecked: v * 1 };
      }
      return group;
    });
  };

  onNewGoup = () => {
    this.initShow = false;
    this.setState({ isAddGroup: true });
  };

  onNameChange = (v) => {
    this.initShow = false;
    this.setState({ newgroupvalue: v });
  };

  renderTitle = () => {
    const { wrapCls } = this.props;
    const { isAddGroup, newgroupvalue } = this.state;
    this.groups = this.setGroups();
    let groups = this.groups;
    return (
      <div className={`${wrapCls}-title`}>
        <div className="top-tip">{getLabel(384342, '请选择分组')}:</div>
        <div className="groups">
          {groups &&
            groups.length > 0 &&
            groups.map(item => (
              <WeaCheckbox
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_WeaCheckbox@395jt8@${item.groupName}`}
                value={item.isChecked}
                content={item.groupName}
                onChange={v => this.changeGroupSelect(v, item)}
              />
            ))}
        </div>
        {!isAddGroup ? (
          <div className="new-group" onClick={this.onNewGoup}>
            <span className="icon-email-New-group" />
            <span>{getLabel(30131, '新建分组')} </span>
          </div>
        ) : (
          <div className="add-group">
            <div className="add-group-content">
              <WeaInput
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_WeaInput@3zx17r`}
                placeholder={getLabel(30127, '分组名称')}
                value={newgroupvalue}
                onChange={this.onNameChange}
              />
            </div>
            <div className="add-group-opt">
              <Button
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_Button@n1g2jv`}
                type="primary"
                disabled={newgroupvalue.trim() === ''}
                onClick={this.addGroup}
              >
                {getLabel(826, '确定')}
              </Button>
              <Button
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_Button@644jox`}
                onClick={this.cancelNewGroup}
              >
                {getLabel(201, '取消')}
              </Button>
            </div>
          </div>
        )}
      </div>
    );
  };

  addGroup = () => {
    const { newGroup } = this.props;
    const { newgroupvalue } = this.state;
    let __this = this;
    newGroup(
      {
        groupName: newgroupvalue.trim(),
        operation: 'addOrThenMoveOrCopy',
        groupId: '0',
      },
      () => {
        __this.setState({ newgroupvalue: '' });
      },
    );
  };

  cancelNewGroup = () => {
    this.setState({ isAddGroup: false, newgroupvalue: '' });
  };

  onSubmit = () => {
    const { onSubmit, concactIds } = this.props;
    let groupId = this.groups.filter(v => v.isChecked === 1);
    if (groupId.length > 0) groupId = groupId.map(v => v.goutId).join();
    let params = {
      operation: 'moveOrCopyToGroup',
      opt: 'move',
      concactIds,
      groupId,
    };
    onSubmit(params);
    this.setState({ visible: false });
    this.cancelNewGroup();
  };

  onVisibleChange = (v) => {
    this.setState({ visible: v });
    // if (v) this.initShow = false;
    if (!v) {
      this.initShow = true;
      this.setState({ isAddGroup: false, newgroupvalue: '' });
    }
  };

  render() {
    const { wrapCls } = this.props;
    const { visible } = this.state;
    return (
      <Popover
        ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@ose7o6`}
        placement="bottomLeft"
        trigger="click"
        visible={visible}
        title={this.renderTitle()}
        onVisibleChange={this.onVisibleChange}
        overlayClassName={wrapCls}
        content={
          <Button
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_Button@p0hnwp`}
            type="primary"
            onClick={this.onSubmit}
          >
            {getLabel(30986, '保存')}
          </Button>
        }
      >
        {this.props.children}
      </Popover>
    );
  }
}
